<template>
    <div>
        <Form ref="formInline" :model="query" inline>
            <FormItem prop="username">
                <Input type="text" v-model="query.remark" placeholder="任务说明">
                    <Icon type="ios-person-outline" slot="prepend"></Icon>
                </Input>
            </FormItem>
            <FormItem>
                <Button type="primary" @click="search">查询</Button>
                <Button type="warning" @click="add">新增</Button>
            </FormItem>
        </Form>
        <Table border :columns="columns" :data="tableData">
          <template slot="method" slot-scope="{ row }">
            {{row.method === 1 ? 'GET' : 'POST'}}
          </template>
          <template slot="active" slot-scope="{ row }">
            {{row.status === 1 ? '开启' : '关闭'}}
          </template>
            <template slot-scope="{ row, index }" slot="action">
                <Button type="primary" size="small" style="margin-right: 5px" @click="edit(row)">编辑</Button>
                <Button type="error" size="small" @click="remove(row.id)">删除</Button>
            </template>
        </Table>
        <Page :total="total" :current="query.extend.current" :page-size="query.extend.size" show-sizer @on-change="toPage" @on-page-size-change="changeSize"/>

        <Modal v-model="modelShow" :title="modelType===1?'新增':'编辑'">
            <Form
                ref="formValidate"
                :model="formValidate"
                :label-width="100"
            >
                <FormItem label="cron表达式" prop="cron" :rules="{
                    required: true,
                    message: 'cron表达式必填',
                    trigger: 'blur'
                }">
                    <Input v-model="formValidate.cron" maxlength="20"/>
                </FormItem>
                <FormItem label="api" prop="api" :rules="{
                    required: true,
                    message: '任务接口必填',
                    trigger: 'blur'
                }">
                    <Input v-model="formValidate.api" maxlength="20"/>
                </FormItem>
                <FormItem label="接口类型" prop="apiMethod">
                    <Select v-model="formValidate.apiMethod" style="width:200px">
                      <Option v-for="item in apiMethod" :value="item.id" :key="item.id">{{ item.type }}</Option>
                  </Select>
                </FormItem>
                <FormItem label="参数" v-if="formValidate.apiMethod === 2" prop="param">
                    <Input v-model="formValidate.param" maxlength="255" show-word-limit type="textarea" placeholder="JSON格式参数字符串" style="width: 200px" />
                </FormItem>
                <FormItem label="说明" prop="remark" :rules="{
                    required: true,
                    message: '说明必填',
                    trigger: 'blur'
                }">
                    <Input v-model="formValidate.remark" maxlength="255" show-word-limit type="textarea" placeholder="任务说明" style="width: 200px" />
                </FormItem>
                <FormItem label="状态" prop="status">
                    <i-switch size="large" v-model="formValidate.status" :true-value="1" :false-value="0">
                      <span slot="open">开启</span>
                      <span slot="close">关闭</span>
                  </i-switch>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button type="text" size="large" @click="modelShow=false">取消</Button>
                <Button type="primary" size="large" @click="submit">确定</Button>
            </div>
        </Modal>
    </div>
</template>
<script>
import { findPage, addTask, updTask, delTask } from './task'
export default {
  name: 'task',
  data () {
    return {
      query: {
        name: '',
        extend: {
          current: 1,
          size: 10,
          like: 'remark'
        }
      },
      total: 0,
      columns: [
        {
          title: '任务说明',
          resizable: true,
          width: 300,
          tooltip: true,
          key: 'remark'
        },
        {
          title: 'cron',
          width: 220,
          resizable: true,
          key: 'cron'
        },
        {
          title: '任务接口api',
          resizable: true,
          width: 200,
          key: 'api'
        },
        {
          title: '接口类型',
          slot: 'method',
          align: 'center'
        },
        {
          title: 'json参数',
          resizable: true,
          width: 300,
          tooltip: true,
          key: 'param'
        },
        {
          title: '状态',
          slot: 'active',
          align: 'center'
        },
        {
          title: '操作',
          fixed: 'right',
          slot: 'action',
          width: 150,
          align: 'center'
        }
      ],
      tableData: [],
      apiMethod: [{ id: 1, type: 'GET' }, { id: 2, type: 'POST' }],
      modelShow: false,
      modelType: 1,
      formValidate: {}
    }
  },
  created () {
    this.findPage()
  },
  methods: {
    edit (row) {
      this.$refs.formValidate.resetFields()
      this.formValidate = Object.assign({}, row)
      this.modelShow = true
      this.modelType = 2
    },
    remove (id) {
      delTask(id).then(res => {
        if (res.code === 401) {
          this.$Message.error(res.msg)
        } else {
          this.$Message.success('删除成功')
          this.search()
        }
        this.modelShow = false
      })
    },
    add () {
      this.$refs.formValidate.resetFields()
      this.formValidate = { apiMethod: 1, status: 1 }
      this.modelShow = true
      this.modelType = 1
    },
    submit () {
      this.$refs.formValidate.validate((valid) => {
        if (valid) {
          if (this.modelType === 1) {
            addTask(this.formValidate).then(res => {
              this.modelShow = false
              this.search()
              this.$Message.success('新增成功')
            })
          } else {
            updTask(this.formValidate).then(res => {
              this.modelShow = false
              this.search()
              this.$Message.success('编辑成功')
            })
          }
        }
      })
    },
    search () {
      this.query.extend.current = 1
      this.findPage()
    },
    findPage () {
      findPage(this.query).then(res => {
        if (res.code === 200) {
          this.total = res.data.total
          this.query.extend.current = res.data.current
          this.tableData = res.data.records
        } else { this.$Message.error(res.msg) }
      })
    },
    toPage (current) {
      this.query.extend.current = current
      this.findPage()
    },
    changeSize (size) {
      this.query.extend.current = 1
      this.query.extend.size = size
      this.findPage()
    }
  }
}
</script>
